<template>
  <div class="model">
    <div class="mask" @click="changeIsShowLoginModel(false)">

    </div>
    <div class="loginbox">
        <div class="close" @click="changeIsShowLoginModel(false)"></div>
        <section class="nav">
            <a href="javascript:void(0);" :class="{active: isShowPhone }" @click="isShowPhone=true">手机号登录</a> | <a href="javascript:void(0);" :class="{active: !isShowPhone }" @click="showQr">微信扫码登录</a>
        </section>
        <div class="content">
            <div class="phonebox" v-show="isShowPhone">
                <div class="row">
                    <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
                </div>
                <div class="row">
                    <slide-verify :l="42" :r="20" :w="362" :h="140" :imgs="imgArr" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg"></slide-verify>
                </div>
                <div class="row">
                    <input type="text" placeholder="请输入验证码" v-model="codeval"> <button class="btncode" @click="getcode" v-show="!isShowCount">获取验证码</button>
                    <button class="btncode" v-show="isShowCount">{{ count }} s后重新获取</button>
                </div>
                <div class="row">
                     <button class="btnlogin" @click="submitFn">登录</button>
                </div>
               
            </div>
            <!-- 显示微信二维码第二步 -->
            <div id="weixin" class="qrbox" v-show="!isShowPhone">
                微信登录
            </div>
        </div>
        </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import { validatePhoneNumber } from '@/utils'
import { PhoneReginAPI, SendSMSAPI,BinDingAPI } from '@/request/api'

export default {
    data(){
        return{
             isShowPhone:true,
             msg: "向右滑动",
             count:10,
             phoneNumber:"",
             isShowCount:false,
             codeval:"",
             imgArr:[
                require("@/assets/img/integral-01.9386d4bf.png"),
                require("@/assets/img/integral-02.150d92a1.png"),
                require("@/assets/img/integral-03.9870f3f1.png"),
                require("@/assets/img/integral-04.afadcbdf.png"),
             ]
        }
       
    },
    methods:{
        ...mapMutations({
            changeIsShowLoginModel:"showModel/changeIsShowLoginModel",
            changeIsLoginStatus:"loginStatus/changeIsLoginStatus",
            
        }),
        ...mapActions({
            asyncIsShowToast:"showToast/asyncIsShowToast",
            asyncchangeUserInfo:"userInfo/asyncchangeUserInfo"
        }),
        // 拼图成功
        onSuccess(times) {
        let ms = (times / 1000).toFixed(1);
        this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
        this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
        this.msg = "再试一次";
        },
        toVerify(){
            if(!validatePhoneNumber(this.phoneNumber)){
                
                this.asyncIsShowToast({
                    isshow:true,
                    msg:"请输入正确的手机号码！",
                    type:"danger",
                });
                return;
            }
            if(this.msg=="向右滑动" || this.msg== "再试一次"){
                
                this.asyncIsShowToast({
                    isshow:true,
                    msg:"请滑动验证码！",
                    type:"danger",
                });
                
                return;
            }
            return true
        },
        async getcode() {
            
            let flag = this.toVerify();
            if(!flag) return;
            let res = await SendSMSAPI({
                phone: this.phoneNumber,
            });
            // console.log("res",res);
            if (res.code == 0) {
                this.isShowCount =true;
                let timer = setInterval(() => {
                this.count--;
                if(this.count == 0) {
                    clearInterval(timer);
                    this.count = 10
                    this.isShowCount = false
                }
            },1000)
            }
            
        },
        showQr(){
            this.isShowPhone = false;

            let _this = this;
          new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLC5pbXBvd2VyQm94IC5pbmZvew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9ICAgIA0KLmltcG93ZXJCb3ggcXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9",
          });
        },
        // 登录
        async submitFn(){
            if(! this.toVerify())return
            if(this.codeval==""){
                this.asyncIsShowToast({
                    isshow:true,
                    msg:"请输入短信验证码",
                    type:"danger",
                });
                return;
            }
            // 根据uuid取费是否手机绑定微信
            let uuid = localStorage.getItem("uuid");
            let res = null;
            if (uuid) {
                res = await BinDingAPI({
                    verifyCode: this.codeval,
                    phone: this.phoneNumber,
                    uuid,
                });
                // console.log("登录请求-uuid:",res);
            }else{
                res = await PhoneReginAPI({
                verifyCode: this.codeval,
                phone: this.phoneNumber,
            });
            // console.log("登录请求：",res);
            }
            
            if (!res) return;
            // 1.提示成功
            this.asyncIsShowToast({
                    isshow:true,
                    msg:"登录成功",
                    type:"success",
                });
                // 2.本地存储token
            localStorage.setItem("x-auth-token", res["x-auth-token"]);
            // 3.关闭模态框
            this.changeIsShowLoginModel(false);
            // 4.显示购物车
            this.changeIsLoginStatus(true);
            // 删除uuid
            localStorage.removeItem("uuid");
            
            this.asyncchangeUserInfo();
        }
    }
}
</script>

<style lang="less" scoped>
.model{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        }
    .loginbox {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");
        .close{
            width: 22px;
            height: 22px;
            position: absolute;
            right: 54px;
            top: 10px;
            background: url("../assets/img/close.png");
        }
        .nav{
            text-align: center;
            padding-top: 50px;
            a{
                text-decoration: none;
                color: #000;
                &.active {
                    color: red;
                }
            }
        }
        .content {
            width: 355px;
            margin: 10px auto 0;
            .phonebox {
                margin-top: 20px;
                .row {
                    display: flex;
                    margin-bottom: 20px;
                    input {
                        flex: 1;
                        height: 50px;
                        text-indent: 1em;
                        outline: none;
                    }
                    button {
                        height: 50px;
                        background-color: #0a328e;
                        color: #fff;
                        border: none;
                    }
                    .btncode{
                        margin-left: 10px;
                        height: 55px;
                    }
                    .btnlogin{
                        width: 100%;
                    }
                }
            }
            .qrbox{
                text-align: center;
            }
        }
    }
}
/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>